<template>
	<view class="flex-col page">
		<u-navbar title="价格计算器" bgColor="#fff" leftIcon=" " placeholder="true"></u-navbar>
		<view class="mt-8 flex-col section_2">
			<text class="self-start font text text_3">{{ today }}</text>
			<view class="flex-row self-stretch group">
				<text class="font_2 text">总金额：￥{{ total_money }}</text>
				<text class="font_2 text ml-97-5">总数量：{{ total_number }}</text>
			</view>
			<view class="flex-col self-stretch group_2">
				<view class="flex-row justify-between group_3">
					<view class="flex-col items-center col_1">
						NO
					</view>
					<view class="flex-col items-center col_2">
						名称
					</view>
					<view class="flex-col items-center col_2">
						数量
					</view>
					<view class="flex-col items-center col_2">
						单价
					</view>
					<view class="flex-col items-center col_2">
						总价
					</view>
					<view class="flex-col items-center col_1">

					</view>
				</view>
				<view class="flex-row justify-between group_3" v-for="(item, index) in list">
					<view class="flex-col items-center col_3">
						{{ item.id }}
					</view>
					<view class="flex-col items-center col_4" @click="click_yan(index)">
						{{ item.name }}
					</view>
					<view class="flex-col items-center col_4" @click="click_num(index)">
						<u--input placeholder="请输入" border="none" inputAlign="center" v-model="item.number"
							@change="numChange"></u--input>
					</view>
					<view class="flex-col items-center col_4">
						<u--input placeholder="请输入" border="none" inputAlign="center" v-model="item.hq_price"
							@change="numChange"></u--input>
						<!-- {{item.hq_price}} -->
					</view>
					<view class="flex-col items-center col_4">
						{{ item.total_price }}
					</view>
					<view class="flex-col items-center col_3" @click="del(index)">
						<image class="image"
							src="https://www.dlxx.top/static/images/e4f59c4562b8f8cc89a9592ab2778a9e.png" />
					</view>
				</view>
				<view class="flex-row justify-center text-wrapper_5" @click="add">
					<image class="image_2"
						src="https://www.dlxx.top/static/images/92698f229800d7f56442f95d962409a7.png" />
					<text class="ml-8 font_3 text text_9">增加行</text>
				</view>
			</view>
		</view>

		<u-popup :show="show_popup" mode="bottom" :round="20" :closeable="true" bgColor="#f2f6f7"
			@close="show_popup = false">
			<view class="flex-col popup">
				<view class="flex-col">
					<u-search placeholder="请搜索产品名称" :showAction="false" v-model="keyword" @change="search"></u-search>
				</view>
				<view class="flex-col list">
					<view class="flex-row justify-between items-center list-item" v-for="(item, index) in yan_list"
						@click="sel(item)">
						<text class="font_2">{{ item.name }} 行情价：{{ item.hq_price }}</text>
						<view class="sel_btn">
							选这个
						</view>
					</view>
				</view>
			</view>
		</u-popup>

		<view class="flex-col justify-start relative section_7 section_16">
			<view class="flex-row">
				<view class="flex-col items-center group_5 equal-division-item"
					@click="$util.redirectTo('/pages/index_new/index_jiu', {}, 'reLaunch')">
					<image class="image_3"
						src="http://ts.ysgzt.cn/static/images/wechat/resources/02d7f445c0c10dec33dc384baa99b29e.png" />
					<text class="mt-4 font_2 text">首页</text>
				</view>
				<view class="ml-12 flex-col items-center group_5 equal-division-item"
					@click="$util.redirectTo('/pages/index_new/tab_jsq', {}, 'reLaunch')">
					<image class="image_3"
						src="http://ts.ysgzt.cn/static/images/wechat/resources/9b9ee407d67e8d766eac3446626487a4.png" />
					<text class="mt-4 font_2 text text_9">计算器</text>
				</view>
				<view class="ml-12 flex-col items-center group_5 equal-division-item">
					<image class="image_3"
						src="http://ts.ysgzt.cn/static/images/wechat/resources/3e4fab963aab89266abb422ad574de3a.png" />
					<text class="mt-4 font_2 text">客服</text>
				</view>
				<view class="ml-12 flex-col items-center group_5 equal-division-item"
					@click="$util.redirectTo('/pages/index_new/tab_my', {}, 'reLaunch')">
					<image class="image_3"
						src="http://ts.ysgzt.cn/static/images/wechat/resources/91cd88245ca2b6b17f85b06125b04763.png" />
					<text class="mt-4 font_2 text">我的</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	components: {},
	props: {},
	data() {
		return {
			today: '',
			list: [{
				id: 1,
				name: '',
				number: 1,
				hq_price: 0,
				total_price: 0,
			}],
			area_id: 0,
			total_money: 0,
			total_number: 0,
			show_popup: false,
			op_index: 0,
			keyword: '',
			yan_list: '',
			userInfo: '',
		};
	},
	onLoad() {
		var Dates = new Date();
		this.today =
			`${Dates.getFullYear()}-${String(Dates.getMonth() + 1).padStart(2, '0')}-${String(Dates.getDate()).padStart(2, '0')}`;

		var area_id = uni.getStorageSync('area_id');
		if (area_id > 0) this.area_id = area_id;

	},
	methods: {
		numChange(e) {
			if (e) this.calculate();
		},
		click_num(index) {
			this.op_index = index
		},
		click_yan(index) {
			this.show_popup = true;
			this.op_index = index;
		},
		search() {
			this.userInfo = uni.getStorageSync('userInfo');

			this.$api.sendRequest({
				url: '/api/index/getYanList',
				data: {
					keyword: this.keyword,
					area: this.area_id,
					user_id: this.userInfo.id,
				},
				success: res => {
					console.log(res.data)
					if (res.code == 1) {
						this.yan_list = res.data;
					}
				}
			});
		},
		sel(item) {
			this.list[this.op_index].name = item.name;
			this.list[this.op_index].hq_price = item.hq_price;
			this.list[this.op_index].total_price = (item.hq_price * this.list[this.op_index].number).toFixed(2);
			this.calculate();
			this.show_popup = false;
			this.keyword = '';
			this.yan_list = '';
		},
		calculate() {
			var total_number = 0;
			var total_money = 0;
			this.list.forEach(item => {
				if (item.name) {
					total_number = (parseFloat(total_number) + parseFloat(item.number)).toFixed(2);
				}
				total_money = (parseFloat(total_money) + (parseFloat(item.hq_price) * parseFloat(item.number)))
					.toFixed(2);
				item.total_price = (item.hq_price * item.number).toFixed(2);
			})
			this.total_number = total_number;
			this.total_money = total_money;
		},
		add() {
			var add_data = [{
				'id': this.list.length + 1,
				'name': '',
				'number': 1,
				'hq_price': 0,
				'total_price': 0,
			}];
			this.list = [...this.list, ...add_data]
		},
		del(index) {
			console.log(index)
			this.list.splice(index, 1);
			this.calculate()
		},
	},
};
</script>

<style scoped lang="scss">
.popup {
	padding: 70rpx 30rpx;
	height: 800rpx;

	.list {
		padding: 16rpx 20rpx;
		margin-top: 40rpx;
		height: 700rpx;
		overflow: auto;

		.list-item {
			padding: 20rpx;
			border-bottom: 1rpx solid #eeeeee;
		}
	}

	.font_2 {
		font-size: 24rpx;
		font-family: PingFangSC;
		line-height: 24rpx;
		color: #00140d;
	}

	.sel_btn {
		width: 80rpx;
		height: 36rpx;
		line-height: 36rpx;
		text-align: center;
		color: #fff;
		font-size: 20rpx;
		border-radius: 18rpx;
		background-color: #00806b;
	}
}

.ml-97-5 {
	margin-left: 195rpx;
}

.page {
	background-color: #f5f5f5;
	width: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	height: 100vh;

	.section_2 {
		margin: 10rpx;
		padding: 20rpx;
		background-color: #ffffff;
		border-radius: 10rpx 10rpx 0 0;

		.font {
			font-size: 24rpx;
			font-family: PingFangSC;
			line-height: 19rpx;
			color: #00140d;
		}

		.text_3 {
			margin-left: 10rpx;
		}

		.group {
			margin-top: 31rpx;
			padding: 0 10rpx;

			.font_2 {
				font-size: 24rpx;
				font-family: PingFangSC;
				line-height: 24rpx;
				color: #00140d;
			}
		}

		.group_2 {
			margin-top: 22rpx;

			.group_3 {
				padding-bottom: 2rpx;

				.col_1 {
					background-color: #00806b;
					width: 70rpx;
					height: 58rpx;
					border: solid 1rpx #eeeeee;
					color: #fff;
					line-height: 57rpx;
					font-size: 24rpx;
				}

				.col_2 {
					background-color: #00806b;
					width: 140rpx;
					height: 58rpx;
					border: solid 1rpx #eeeeee;
					color: #fff;
					line-height: 57rpx;
					font-size: 24rpx;
				}

				.col_3 {
					background-color: #ffffff;
					width: 70rpx;
					height: 58rpx;
					border: solid 1rpx #eeeeee;
					color: #00140d;
					line-height: 57rpx;
					font-size: 24rpx;
				}

				.col_4 {
					background-color: #ffffff;
					width: 140rpx;
					height: 58rpx;
					border: solid 1rpx #eeeeee;
					color: #00140d;
					line-height: 57rpx;
					font-size: 24rpx;
				}

				.image {
					width: 68rpx;
					height: 58rpx;
				}

			}

			.text-wrapper_8 {
				padding: 17rpx 0 21rpx;
				background-color: #ffffff;
				width: 68rpx;
				height: 58rpx;
				border-left: solid 1rpx #eeeeee;
				border-right: solid 1rpx #eeeeee;
				border-top: solid 1rpx #eeeeee;
				border-bottom: solid 1rpx #eeeeee;

				.text_8 {
					line-height: 18rpx;
				}
			}

			.section_4 {
				background-color: #ffffff;
				width: 139rpx;
				height: 58rpx;
				border-left: solid 1rpx #eeeeee;
				border-right: solid 1rpx #eeeeee;
				border-top: solid 1rpx #eeeeee;
				border-bottom: solid 1rpx #eeeeee;
			}

			.section_5 {
				background-color: #00806b;
				width: 139rpx;
				height: 58rpx;
				border-left: solid 1rpx #eeeeee;
				border-right: solid 1rpx #eeeeee;
				border-top: solid 1rpx #eeeeee;
				border-bottom: solid 1rpx #eeeeee;
			}

			.section_6 {
				background-color: #ffffff;
				width: 68rpx;
				height: 58rpx;
				border-left: solid 1rpx #eeeeee;
				border-right: solid 1rpx #eeeeee;
				border-top: solid 1rpx #eeeeee;
				border-bottom: solid 1rpx #eeeeee;
			}

			.text-wrapper_5 {
				padding: 15rpx 0 18rpx;
				background-color: #ffffff;
				border-left: solid 1rpx #eeeeee;
				border-right: solid 1rpx #eeeeee;
				border-top: solid 1rpx #eeeeee;
				border-bottom: solid 1rpx #eeeeee;

				.text_5 {
					margin-left: 17rpx;
					margin-right: 6rpx;
					color: #011613;
				}

				.image_2 {
					width: 23rpx;
					height: 23rpx;
				}

				.text_9 {
					color: #00806b;
				}
			}

			.font_3 {
				font-size: 24rpx;
				font-family: PingFangSC;
				line-height: 23rpx;
				color: #ffffff;
			}
		}
	}

	.text {
		text-transform: uppercase;
	}
}

.section_7 {
	position: fixed;
	bottom: 0;
	width: 100%;
	padding-bottom: 45rpx;
	padding-bottom: 70rpx;
	background-image: url('http://ts.ysgzt.cn/static/images/wechat/resources/b0c65f9e1a445110392bf031fbc26685.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;

	.group_5 {
		flex: 1 1 169.5rpx;

		.image_3 {
			width: 48rpx;
			height: 48rpx;
		}

		.text_9 {
			color: #00806b;
		}
	}

	.equal-division-item {
		padding: 10rpx 0;
	}
}

.font_2 {
	font-size: 20rpx;
	font-family: PingFangSC;
	line-height: 20rpx;
	color: #011613;
}
</style>